<script setup>
import { fileSize } from '@u/tool'
const emit = defineEmits(['deleteFile'])

const props = defineProps({
    tableData: {
        type: Array,
        default: []
    }
})
const totalSize = computed(() =>
  fileSize(props.tableData.reduce((s, it) => (s += it.size), 0))
);
const uploadedNumber = computed(
  () => props.tableData.filter((f) => f.status === 'success').length
);

</script>

<template>
   <div class="file-table">
    <div class="table">
        <el-table :data="tableData" style="width: 100%">         
            <el-table-column label="文件名" >
                <template #default="{row}">
                    <!-- <el-input v-model="row.name" /> -->
                     {{row.file.name}}
                </template>
            </el-table-column>
            <el-table-column  label="类型" >
                <template #default="{row}">
                    {{row.file.type}}
                </template>
            </el-table-column>
            <el-table-column label="大小" >
                <template #default="{row}">
                    {{fileSize(row.file.size)}}
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" >
                <template #default="{row}">
                    <el-tag v-if="row.status === 'pending'" type="primary" effect="light" >待上传</el-tag>
                    <el-tag v-else-if="row.status === 'success'" type="success" effect="light" >已上传</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="size" label="操作">
                <template #default="scope">
                    <el-button type="primary" @click="deleteFile(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="count">
        <el-tag type="info" effect="light" >文件数量：{{ tableData.length }}</el-tag>
        <el-tag type="success" effect="light" >成功上传：{{ uploadedNumber }}</el-tag>
        <el-tag type="info" effect="light" >总大小：{{ totalSize }}</el-tag>
    </div>
    </div>
</template>

<style lang="scss" scoped>
.file-table{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    .table{
        height: calc(100% - 50px);
        overflow: hidden;
        :deep(.el-table){
            width: 100%;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            .el-table__header-wrapper table,.el-table__body-wrapper table{
                width: 100% !important;
            }
            .el-table__body, .el-table__footer, .el-table__header{
                table-layout: auto;
            }
        }
    }
    .count{
        flex-shrink: 0;
        margin-top: 20px;
        display: flex;
        gap: 10px;
        :deep(.el-tag){
            font-size: 12px !important;
        }
    }
}
</style>